import React, { useState } from 'react'
import './index.scss'
import { NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { Cascader, Field } from 'react-vant'
import { Calendar, Cell } from 'react-vant'
const Index: React.FC = () => {
    const navigate = useNavigate();
    const [value1, setValue1] = useState('')
    const [value2, setValue2] = useState('')
    const [value3, setValue3] = useState('')
    const [value4, setValue4] = useState('')
    const [value, setValue] = useState<Record<string, string | number>>({})
    const option2 = [
        { text: '身份证', value: 'a' },
        { text: '中国护照', value: 'b' },
        { text: '台胞证', value: 'c' },
        { text: '港澳居民内地通行证', value: 'd' },
        { text: '外籍护照', value: 'e' },
    ]
    const option1 = [
        {
            text: '浙江省',
            value: '330000',
            children: [
                {
                    text: '杭州市',
                    value: '330100',
                    children: [
                        {
                            text: '上城区',
                            value: '330102',
                        },
                        {
                            text: '下城区',
                            value: '330103',
                        },
                        {
                            text: '江干区',
                            value: '330104',
                        },
                    ],
                },
                {
                    text: '宁波市',
                    value: '330200',
                    children: [
                        {
                            text: '海曙区',
                            value: '330203',
                        },
                        {
                            text: '江北区',
                            value: '330205',
                        },
                        {
                            text: '北仑区',
                            value: '330206',
                        },
                    ],
                },
                {
                    text: '温州市',
                    value: '330300',
                    children: [
                        {
                            text: '鹿城区',
                            value: '330302',
                        },
                        {
                            text: '龙湾区',
                            value: '330303',
                        },
                        {
                            text: '瓯海区',
                            value: '330304',
                        },
                    ],
                },
            ],
        },
        {
            text: '江苏省',
            value: '320000',
            children: [
                {
                    text: '南京市',
                    value: '320100',
                    children: [
                        {
                            text: '玄武区',
                            value: '320102',
                        },
                        {
                            text: '秦淮区',
                            value: '320104',
                        },
                        {
                            text: '建邺区',
                            value: '320105',
                        },
                    ],
                },
                {
                    text: '无锡市',
                    value: '320200',
                    children: [
                        {
                            text: '锡山区',
                            value: '320205',
                        },
                        {
                            text: '惠山区',
                            value: '320206',
                        },
                        {
                            text: '滨湖区',
                            value: '320211',
                        },
                    ],
                },
                {
                    text: '徐州市',
                    value: '320300',
                    children: [
                        {
                            text: '鼓楼区',
                            value: '320302',
                        },
                        {
                            text: '云龙区',
                            value: '320303',
                        },
                        {
                            text: '贾汪区',
                            value: '320305',
                        },
                    ],
                },
            ],
        },
    ]
    const option3 = [
        { text: '本人', value: 'a' },
        { text: '父子', value: 'b' },
        { text: '母子', value: 'c' },
        { text: '子孙', value: 'd' },
        { text: '其他', value: 'e' },
    ]
    const option4 = [
        { text: '男', value: '1' },
        { text: '女', value: '2' },
    ]
    const suoyou = {
        value1,
        value2,
        value3,
        value4,
        option2,
        option1,
        option3,
        option4
    }
    const baocun = () => {
        localStorage.setItem('user', JSON.stringify(value1))
        navigate(-1)
    }
    return (
        <div className='box'>
            <div>
                <NavBar
                    title="创建患者"
                    leftText="返回"
                    onClickLeft={() => navigate(-1)}
                />
            </div>
            <div className='box1'>
                <div className='box2'>
                    <Field
                        value={value1}
                        label='名字'
                        placeholder='在输入名字'
                        onChange={setValue1}
                    />
                </div>
                <div className='box3'>
                    <Field
                        label="文本"
                        intro={<div>后续购买、预约线下门诊时必须提供</div>}
                        placeholder="(最好提供)"
                    />
                    <Field
                        value={value2}
                        label='真实名字'
                        placeholder='在输入真实名字'
                        onChange={setValue2}
                    />
                    <Cascader popup={{ round: true }} title='证件类型' options={option2}>
                        {(_, selectedRows, actions) => (
                            <Field
                                isLink
                                value={selectedRows.map(el => el.text).join(',')}
                                readOnly
                                label='证件类型'
                                placeholder='证件类型'
                                onClick={() => actions.open()}
                            />
                        )}
                    </Cascader>
                    <Field
                        value={value3}
                        label='证件类型'
                        placeholder='在输入证件类型'
                        onChange={setValue3}
                    />
                </div>
                <div className='box4'>
                    <Cascader popup={{ round: true }} title='请选择性别' options={option4}>
                        {(_, selectedRows, actions) => (
                            <Field
                                isLink
                                value={selectedRows.map(el => el.text).join(',')}
                                readOnly
                                label='性别'
                                placeholder='请选择性别'
                                onClick={() => actions.open()}
                            />
                        )}
                    </Cascader>
                    <Calendar showConfirm={false}>
                        {(val: Date, actions) => (
                            <Cell
                                isLink
                                title='单个日期'
                                value={val ? val.toLocaleDateString() : '请选择日期'}
                                onClick={() => actions.open()}
                            />
                        )}
                    </Calendar>
                    <Cascader popup={{ round: true }} title='请选择所在地区' options={option1}>
                        {(_, selectedRows, actions) => (
                            <Field
                                isLink
                                value={selectedRows.map(el => el.text).join(',')}
                                readOnly
                                label='地区'
                                placeholder='请选择所在地区'
                                onClick={() => actions.open()}
                            />
                        )}
                    </Cascader>
                    <Cascader popup={{ round: true }} title='与患者的关系' options={option3}>
                        {(_, selectedRows, actions) => (
                            <Field
                                isLink
                                value={selectedRows.map(el => el.text).join(',')}
                                readOnly
                                label='与患者的关系'
                                placeholder='与患者的关系'
                                onClick={() => actions.open()}
                            />
                        )}
                    </Cascader>
                    <Field
                        value={value4}
                        label='电话号'
                        placeholder='请输入电话号'
                        onChange={setValue4}
                    />
                </div>
            </div>
            <div className='box5'>
                <button onClick={baocun}>保存</button>
            </div>
        </div>
    )
}

export default Index
